<template>
  <!-- 我的订单列表 -->
  <transition name='bounce'>
      <div class="order-warp">
          <BaseTitle :back='back' title="我的订单" @goBack='goBack'/>
          <Scroll v-show="!showFlag" :data='list' ref="scroll" class="scroll">
              <div class="wap">
                  <div class="list-warp" v-for="(value,key) in list" :key="key">
                      <div class='top border-bottom'>
                          <div>订单编号: {{key}}</div>
                          <div class="order-ok">交易完成</div>
                      </div>
                      <div class="list" v-for="val in value.orderList" :key="val.order_id">
                          <img class="good-img" :src="val.image_path" :onerror="defaultImg">
                          <div class="good-title">{{val.name}}</div>
                          <div class="good-count">
                              <p>￥{{val.mallPrice}}</p>
                              <p class="count">x{{val.count}}</p>
                          </div>
                      </div>
                      <div class="timre bottom border-top">创建时间: {{handleFormatData(value.createDate)}}</div>
                      <div class="bottom">收货地址: {{value.address}}</div>
                      <div class="bottom">共{{value.orderList.length}}件商品   合计: {{value.totalPrice}}</div>
                  </div>
              </div>
              <div v-if="!list && !showFlag" class="null">
                  {{userName&&!showFlag? '暂无订单' : '请先登录'}}
              </div>
          </Scroll>
          <BaseLoding :showFlag='showFlag'/>
      </div>
  </transition>
</template>

<script>
import BaseTitle from 'components/BaseTitle'
import GoodsList from 'components/GoodsList'
import Scroll from 'components/Scroll'
import {mapGetters} from 'vuex'
import {loading} from 'js/mixin'
import dayjs from 'dayjs';
export default {
    mixins: [loading],
    data() {
        return {
            back: true,
            list: '',
            defaultImg: 'https://s11.mogucdn.com/mlcdn/c45406/200902_4ad5eec25lle00fic3efe2l84k8a0_5999x7996.jpg_640x960.v1cAC.70.jpg',
        };
    },
    computed: {
        ...mapGetters(['userName']),
    },
    components: {
        BaseTitle,
        GoodsList,
        Scroll
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        async getMyOrder() {
            if (!this.userName) {
                this.showFlag = false;
                return;
            }
            this.showFlag = true;
            const res = await this.$http.get('/api/order/myOrder');
            if (res.data.status == 200) {
                this.showFlag = false;
                this.list = res.data.list;
            }
        },
        handleFormatData(timestamp) {
          return dayjs(timestamp).format('YYYY-MM-DD');
        },
    },
    created() {
        this.getMyOrder();
    },
}
</script>
<style lang="less" scoped>
  .order-warp {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 500;
      background: #F2F2F2;
      .scroll {
        position: fixed;
          top: 40px;
          bottom: 0px;
          left: 0;
          right: 0;
          overflow: hidden;
          .wap {
            padding: 5px 0;
              .list-warp {
                  margin: 10px;
                  box-sizing: border-box;
                  padding: 15px 10px;
                  background: #fff;
                  border-radius: 10px;
                  .top {
                      display: flex;
                      justify-content: space-between;
                      padding-bottom: 10px;
                      .order-ok {
                        color: #D2591B;
                      }
                  }
                  .list {
                    display: flex;
                      height: 80px;
                      margin-top: 15px;
                      font-size: 12px;
                      .good-img {
                        flex: 0 0 80px;
                          width: 80px;
                          height: 100%;
                          border-radius: 10px;
                          margin-right: 10px;
                          border: 1px solid #eee;
                      }
                      .good-title {
                          flex: 1;
                          margin-top: 3px;
                          line-height: 1.4;
                          font-size: 13px;
                          letter-spacing: 0.5px;
                          margin-right: 10px;
                      }
                      .good-count {
                        float: 0 0 15%;
                          text-align: right;
                          margin-top: 5px;
                          font-size: 13px;
                          .count {
                            margin-top: 5px;
                            color: #bbb;
                          }
                      }
                  }
                  .bottom {
                      text-align: right;
                      margin-top: 10px;
                  }
                  .timre {
                      margin-top: 10px;
                      padding-top: 10px;
                  }
              }
          }
      }
  }
</style>

